<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter()

const addressId = ref(0)
const addresses = ref([])


const initAddress = () => {
  axios.get('/address/findAddress').then(res=>{
    addresses.value = res.data;
    addresses.value.forEach(addressVo => {
        if (addressVo.isDefault == 1) {
          addressId.value = addressVo.id;
        }
    })
  })
}

const changeAddress = (val) => {
  addressId.value = val;
}

const uniqueCode = ref('')     //唯一标识
const disabled = ref(false)    //提交按钮不可用

onMounted(()=>{
  uniqueCode.value = "WNXY_" + Date.now();
  initAddress();
  initCart();
})

const cart = ref({})
// 查询购物车数据
const initCart = () => {
  axios.get('/cart').then(res=>{
    cart.value = res.data;
  })
}

// 提交订单
const submitOrder = () => {

  // 一、前端幂等保证，解决重复提交问题
  // 设置按钮不可用
  // disabled.value = true;
  // //5秒后可点击
  // setTimeout(() => {
  //   disabled.value = false;
  // }, 5000);

  // 二、后端也需要幂等保证，解决重复提交问题
  axios.post(`/order/createOrder/${addressId.value}/${uniqueCode.value}`).then(resp=>{

     ElMessage.success("生成订单成功，订单编号：" + resp.data);
     // 2秒后跳转到订单页面
     setTimeout(()=>{
       router.push("/order")
     },2000)
  }).catch(err => {
    ElMessage.error("生成订单失败," + err.response.data)
  })
}

</script>


<template>
  <div class="main">

    <h1> 订单提交结算页面 </h1>
    <el-tag>收货地址</el-tag>
    <el-select v-model="addressId" placeholder="请选择收货地址"
               style="width: 400px" size="small">
      <el-option v-for="item in addresses"
                 :key="item.id" :value="item.id"
                 :label="item.label"
                 @change="changeAddress">
      </el-option>
    </el-select>


    <el-card class="cart">
      <el-table :data="cart.itemList" style="width: 100%" stripe highlight-current-row
                class="cart-table">

        <el-table-column type="index" width="55" label="序号">
          <template #default="{$index}">
            {{ $index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="书名">
          <template #default="{row}">
            《{{ row.name }}》
          </template>
        </el-table-column>

        <el-table-column prop="image" label="图片">
          <template #default="{row}">
            <el-image style="height: 120px;"
                      :src="$urlImage + row.image"
                      fit="fit">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="单价">
          <template #default="{row}">
            &yen; {{ row.price.toFixed(2) }}
          </template>
        </el-table-column>


        <el-table-column prop="quantity" label="数量">
          <template #default="{row}">
            <el-tag type="danger">{{ row.quantity }}本</el-tag>
          </template>
        </el-table-column>


        <el-table-column prop="sum" label="金额">
          <template #default="{row}">
            &yen; {{ row.sum.toFixed(2) }}
          </template>
        </el-table-column>


      </el-table>

      <div class="cart-footer">
        <span>共有<span class="cart-number">{{ cart.amount }}</span>本书</span>
        <span>合计：<span style="color: red; font-size: 25px;">
          &yen; {{cart.totalPrice ? cart.totalPrice.toFixed(2) : 0 }}
         </span></span>
        <el-button type="primary"
                   :disabled="disabled"
                   icon="el-icon-s-shop" @click="submitOrder">提交订单</el-button>
      </div>
    </el-card>

  </div>
</template>

<style scoped>
.main {
  padding: 5px;
}


.cart {
  margin-top: 10px;
}

.cart-table {
  border-radius: 10px;
}

.cart-footer {
  margin-top: 10px;
  text-align: right;
}

.cart-footer > * {
  margin: 10px;
}

.cart-number {
  color: red;
  font-size: 22px;
}
</style>
